<template>
  <div class="recycle-process">
    <div class="bg-container"></div>
    <div class="process-container">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped lang="scss">
.recycle-process {
  height: auto;
  width: 100%;
  /* 避免容器超出视口，导致图片被截断 */
  overflow-x: hidden;

  .bg-container {
    height: 102px;
    background-size: 100% 100%;
    background-image: url('https://m.360buyimg.com/babel/jfs/t1/186795/27/41560/57378/6551ca80F14df7f61/8edc2c161998aa87.png');
    background-repeat: no-repeat;
  }

  .process-container {
    max-width: 990px;
    margin: 0 auto;
    padding: 0 20px;

    .top {
      width: 100%;
      height: 93px;
      background-image: url('https://m.360buyimg.com/babel/jfs/t1/226323/31/2540/81166/654b3a7eF9c6f93de/7e0c145539e8c6e2.png');
      background-size: contain; /* 优先完整显示图片，不拉伸 */
      background-repeat: no-repeat;
      background-position: center; /* 图片水平居中 */
    }

    .bottom {

      width: 100%;
      padding-top: 20.1%;
      height: 0; /* 高度由 padding-top 撑起，避免固定高度导致图片截断 */
      background-image: url('https://m.360buyimg.com/babel/jfs/t1/187477/11/42525/202753/6552e80fF6a6f0384/6e80540680153039.png');
      background-size: contain; /* 完整显示图片，不拉伸变形 */
      background-repeat: no-repeat;
      background-position: center top; /* 图片水平居中、垂直靠上（避免底部留白） */
    }
  }
}
</style>
